import React from "react";
import { Cell, Progress } from "react-vant";
import { LikeO, StarO, FireO } from "@react-vant/icons";
import ReactECharts from "echarts-for-react";
const Index: React.FC = () => {
  const list = [
    {
      icon: <LikeO />,
      title: "餐饮美食",
      count: 3,
      color: "red",
      value: 82.06,
    },
    {
      icon: <StarO />,
      title: "日用百货",
      count: 1,
      color: "yellow",
      value: 40,
    },
    {
      icon: <FireO />,
      title: "医疗健康",
      count: 0,
      color: "oranage",
      value: 0,
    },
  ];
  const option = {
    xAxis: {
      type: "category",
      data: ["餐饮美食", "日用百货", "医疗健康"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [82.06, 40, 0],
        type: "bar",
      },
    ],
  };
  return (
    <div>
      <div>
        <ReactECharts option={option} style={{ height: 300 }}></ReactECharts>
      </div>
      <Cell.Group>
        {list.map((v, i) => {
          return (
            <Cell
              key={i}
              icon={v.icon}
              title={v.title}
              value={v.value + "元"}
              label={
                <Progress
                  percentage={v.value}
                  color={v.color}
                  style={{ width: "70vw" }}
                ></Progress>
              }
            ></Cell>
          );
        })}
      </Cell.Group>
    </div>
  );
};

export default Index;
